<template>
  <div class="album">
    <div v-if="album && album.covers &&  album.covers.length>=1 && album.covers[0].src!==''">
      <img style="width: 100%; height: 100%;" :src="album.covers[0].src" />
    </div>
    <header class="header">
      <div class="cover">
        <div class="header-right">
          <p class="title">{{ album.name }}</p>
          <p class="date">
            {{ album.time_name }}
          </p>

        </div>
      </div>

      <!-- <ul class="label-group">
        <li v-for="item in album.has_many_relation_tag" :key="item.id">{{ item.has_one_tag.name }}</li>
      </ul> -->
      <div class="describe-wrapper">
        <template v-if="album.describe">
          <input type="checkbox" v-model="flag_status" id="introduce">
          <p class="describe-content" >
            描述：{{ album.describe }}
          </p>
          <label for="introduce">
            <span>{{ flag_status ? '展开' : '收起' }}</span>
            <span class="arrow"> <i class="iconfont icon-member-left"></i></span>
          </label>
        </template>
      </div>
        <div class="info">
          <div>
            <p class="count">{{ album.product_count }}</p>
            <p class="c-202020">商品数量</p>
          </div>
          <div>
            <p class="count">{{ album.sales }}</p>
            <p class="c-202020">累计销量</p>
          </div>
          <div>
            <p class="count">{{ album.browse_count }}</p>
            <p class="c-202020">累计访问</p>
          </div>
        </div>
    </header>
    <main class="main">
      <div class="item" v-for="item in list" :key="item.id" @click="gotoGoods(item.id)">
        <img style="width: 172px;" :src="item.thumb" alt="">
        <div class="goods-info">
          <p class="overflow">{{ item.title }}</p>
          <p class="original-price" v-if="item.market_price*1>item.price*1 ">原价:{{ item.market_price }}</p>
          <p><span style="color: #f25353;">{{ $i18n.t('money') }}{{ item.price }}</span></p>
        </div>
      </div>
    </main>
    <!-- <goodList :goods='goods' text='搜索结果' class='osll' :goods_template="goods_template"></goodList> -->
  </div>
</template>
<script>
import { scrollMixin } from '../../utils/mixin';
import { Image as VanImage } from 'vant';
import goodList from "../../components/goodsList";
export default {
  components: { VanImage, goodList },
  mixins: [scrollMixin],
  data() {
    return {
      flag_status: true,
      goods: [],
      album_id: "",//专辑Id
      goods_template: {},
      album: {},//专辑信息
      list: [],//商品列表
      isLoadMore: true,
      current_page: 1,
      last_page: 1
    }
  },
  activated() {
    this.isLoadMore = true;
    this.current_page = 1;

    function UrlSearch() {
      var name, value;
      let str = window.location.hash;
      var num = str.indexOf("?")
      str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ]
      var arr = str.split("&"); //各个参数放到数组里
      for (var i = 0; i < arr.length; i++) {
        num = arr[i].indexOf("=");
        if (num > 0) {
          name = arr[i].substring(0, num);
          value = arr[i].substr(num + 1);
          this[name] = value;
        }
      }
    }
    let query = new UrlSearch();
    this.album_id = query.album_id;

    this.getData()
  },
  methods: {
    gotoGoods(gid) {
        this.$router.push(this.fun.getUrl("goods", { id: gid }));
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.current_page >= this.last_page) {
        return;
      }
      let page = this.current_page + 1;
      $http.get("plugin.yz-supply.frontend.album.detail.index", { page, album_id: this.album_id }).then(res => {
        this.isLoadMore = true;
        if (res.result) {
          let data = res.data;
          this.list = this.list.concat(data.list.data);
          this.current_page = data.list.current_page;
        }
      })
    },
    getData() {
      $http.get("plugin.yz-supply.frontend.album.detail.index", { page: 1, album_id: this.album_id }).then(res => {
        if (res.result) {
          let data = res.data;
          this.album = data.album;
          this.list = data.list.data;
          this.last_page = data.list.last_page;
          this.isLoadMore = true;
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .album .van-image {
  border-radius: 0.3125rem;
  overflow: hidden;
}

.album {
  .main {
    padding: 0.4125rem;
    display: flex;
    flex-wrap: wrap;

    .overflow {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .goods-info {
      padding: 0.4375rem 0.375rem 1.0625rem;
    }

    .original-price {
      color: #a4a4a4;
      margin-top: 2px;
      margin-bottom: 5px;
      text-decoration: line-through;
    }

    .item {
      width: 47%;
      text-align: left;
      margin: 5px;
      background: #fff;
      overflow: hidden;

      img {
        margin: 0;
      }

      border-radius: 0.3125rem;
    }
  }

  .cover {
    display: flex;
    margin-bottom: 0.625rem;
    background-color: #fff;
    border-radius: 0.3125rem;
    padding: 0.6rem;
  }

  .header {
    padding: 0.6875rem 0.625rem;

    .describe-wrapper {
      font-size: 0.8125rem;
      color: #333;
      background-color: #fff;
      border-radius: 0.3125rem;
      padding: 0.6rem;
      margin-bottom: 0.625rem;
    }

    .describe-title {
      text-align: center;
      margin-bottom: 0.75rem;
    }

    .count {
      font-size: 1.0625rem;
      color: #f14e4e;
    }

    .c-202020 {
      color: #202020;
    }

    .info {
      background-color: rgba(254, 227, 183, 0.3);
      height: 4.375rem;
      border-radius: 0.3125rem;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    .describe-content {
      width: 100%;
      text-align: left;
      color: #666;
      height: 1.8125rem;
      font-size: 0.6875rem;
      margin-bottom: 0.875rem;
      overflow: hidden;
      word-break: break-all;
    }

    #introduce {
      display: none;
    }

    #introduce:checked + .describe-content {
      height: auto;
    }

    .arrow {
      display: inline-block;
      // transform: rotate(270deg);
      transform: rotate(90deg);
      margin-left: 0.625rem;

      .iconfont {
        font-size: 0.625rem;
      }
    }

    #introduce:checked ~ label[for="introduce"] .arrow {
      // transform: rotate(90deg);
      transform: rotate(270deg);
    }

    .label-group {
      display: flex;
      flex-wrap: wrap;

      li {
        border-radius: 0.125rem;
        border: solid 0.0625rem #f14e4e;
        padding: 0.375rem 0.4375rem 0.375rem 0.5rem;
        color: #f14e4e;
        margin-right: 0.625rem;
        margin-bottom: 1.25rem;
      }
    }

    .header-right {
      padding-top: 0.3125rem;
      padding-left: 0.625rem;
      padding-right: 0.875rem;
      text-align: left;
    }

    .title {
      font-size: 0.875rem;
    }

    .date {
      padding-top: 14px;
      color: #7e7e7e;
      font-size: 0.75rem;
    }
  }
}
</style>